<template>
  <div class="flex flex-col h-full">
    <div class="flex-shrink-0 flex flex-row">
      <a-input v-model:value="url" placeholder="输入网址"></a-input>
      <a-input v-model:value="width" placeholder="输入宽度(如: 1920)"></a-input>
      <a-input v-model:value="height" placeholder="输入高度(如: 1080)"></a-input>
    </div>
    <div class="flex-1 h-0 overflow-auto p-4">
      <div class="border-solid border-[8px] border-red-600 w-max">
        <iframe class="w-full h-full" :src="url" :style="iframeSizeStyle"></iframe>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const url = ref('http://localhost:5173/demo01')
const width = ref(1920)
const height = ref(1080)
const iframeSizeStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${height.value}px`
}))
</script>

<style scoped></style>
